<template>
  <div
    class="shop-main"
    :style="{
      top: isTop ? `171px` : `148px`,
      'z-index': currentIndex === 1 ? 1 : 0,
    }"
  >
    <div class="shop" v-show="currentIndex === 0">
      <shop-commodity-list  :restaurant-id="restaurantId" />
      <shop-evaluate-list @handleOpenSpecification="handleOpenSpecification" />
      <!-- 选规格 -->
      <shop-specifications
        :is-open-specification="isOpenSpecification"
        @handleCloseSpecification="handleCloseSpecification"
        :specifications-data="specificationsData"
      />
    </div>
    <shop-appraise v-show="currentIndex === 1" />
  </div>
</template>

<script>
import ShopCommodityList from "./childComps/ShopCommodityList";
import ShopEvaluateList from "./childComps/ShopEvaluateList";
import ShopAppraise from "./childComps/ShopAppraise";

import ShopSpecifications from "./childComps/childComps/ShopSpecifications";
export default {
  data() {
    return {
      isTop: false,
      isOpenSpecification: false,
      specificationsData: {},
      currentIndex: 0,
    };
  },
  props: {
    restaurantId: {
      type: Number,
      default: 0,
    },
  },
  created() {
    this.$bus.$on("activities", (res) => {
      if (res.length) {
        this.isTop = true;
      } else {
        this.isTop = false;
      }
    });
  },
  mounted() {
    this.$bus.$on("handleControlSwitch", (index) => {
      this.currentIndex = index;
    });
  },
  methods: {
    handleOpenSpecification(specificationsData) {
      this.specificationsData = specificationsData;
      this.isOpenSpecification = true;
    },
    handleCloseSpecification(value) {
      this.isOpenSpecification = value;
    },
  },
  components: {
    ShopCommodityList,
    ShopEvaluateList,
    ShopSpecifications,
    ShopAppraise,
  },
};
</script>
<style lang="less" scoped>
.shop-main {
  display: flex;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  border-top: 1px solid #eaeaea;
  overflow: hidden;
  .shop {
    display: flex;
    width: 100%;
  }
}
</style>